<template>
  <el-card class="form-container" shadow="never">
    <el-steps :active="active" finish-status="success" align-center>
      <el-step title="填写活动信息" />
      <el-step title="填写活动属性" />
    </el-steps>
    <activity-info-detail v-show="showStatus[0]" v-model="activityParam" :is-edit="isEdit" @nextStep="nextStep" />
    <activity-attr-detail v-show="showStatus[1]" v-model="activityParam" :is-edit="isEdit" @prevStep="prevStep" @finishCommit="finishCommit" />
  </el-card>
</template>
<script>
import ActivityInfoDetail from './ActivityInfoDetail'
import ActivityAttrDetail from './ActivityAttrDetail'

import { createActivity, fetchActivity, updateActivity } from '@/api/purch/purchActivity'

const defaultActivityParam = {
  id: '',
  projectName: '',
  amount: '',
  singleMaxAmount: '',
  purchRate: 1,
  promotionDate: [],
  purchUrl: '',
  activityStatus: false,
  remark: '',
  activityImgUrl: ''
}
export default {
  name: 'ActivityDetail',
  components: { ActivityInfoDetail, ActivityAttrDetail },
  props: {
    isEdit: { type: Boolean, default: false }
  },
  data() {
    return {
      active: 0,
      activityParam: Object.assign({}, defaultActivityParam),
      showStatus: [true, false]
    }
  },
  created() {
    if (this.isEdit) {
      fetchActivity(this.$route.query.activityId).then(response => {
        this.activityParam = response.data
        this.activityParam.promotionDate = [response.data.startDate, response.data.endDate]
      })
    }
  },
  methods: {
    hideAll() {
      for (let i = 0; i < this.showStatus.length; i++) {
        this.showStatus[i] = false
      }
    },
    prevStep() {
      if (this.active > 0 && this.active < this.showStatus.length) {
        this.active--
        this.hideAll()
        this.showStatus[this.active] = true
      }
    },
    nextStep() {
      if (this.active < this.showStatus.length - 1) {
        this.active++
        this.hideAll()
        this.showStatus[this.active] = true
      }
    },
    finishCommit(isEdit) {
      const text = isEdit ? '编辑' : '新增'
      this.$confirm('是否要' + text + '该活动', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
        if (isEdit) {
          updateActivity(this.$route.query.activityId, this.activityParam).then(response => {
            this.$message({ type: 'success', message: '提交成功', duration: 1000 })
            this.$router.back()
          })
        } else {
          createActivity(this.activityParam).then(response => {
            this.$message({ type: 'success', message: '提交成功', duration: 1000 })
            location.reload()
          })
        }
      })
    }
  }
}
</script>
<style>
  .form-container {
    width: 800px;
  }
</style>

